<template>
  <div class="ttt-tabs-title-item" :class="titleClass" ref="tabTitleDom" @click="handleClick">
    <slot name="default"></slot>
  </div>
</template>

<script setup lang="ts">
import { computed, inject, ref } from 'vue'
import type { Ref } from 'vue'
import type { TabsMittEmit } from './TTab'

const currentActive = inject<Ref<number>>('currentActive')
const tabsMittEmit = inject<TabsMittEmit | undefined>('tabsMittEmit', undefined)

const tabTitleDom = ref()

const titleClass = computed(() => {
  if (!tabTitleDom.value || !currentActive) return null
  return {
    ac: currentActive.value === Number(tabTitleDom.value.dataset?.index)
  }
})

const handleClick = () => {
  if (!tabTitleDom.value.dataset?.index) return
  tabsMittEmit && tabsMittEmit.emit('click', Number(tabTitleDom.value.dataset?.index))
}
</script>

<style scoped lang="scss">
.ttt-tabs-title-item {
  height: 100%;
  text-align: center;
  position: relative;
  z-index: 10;
  flex: 1 0 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  padding: 0 16rem;
  box-sizing: border-box;

  &.ac {
    color: #fff;
  }
}
</style>
